<template>
	<view style="padding:0 25rpx 200rpx;">
<!-- 		<view class="uni-list" style="margin-bottom: 30rpx;">
			<uni-list-item :title="personal?.realName" :note="personal?.sex=='0'?'女':'男'" :thumb="personal?.picUrl"
				thumb-size="lg">
			</uni-list-item>
		</view> -->
		<view class="topBox">
			<view class="top flexBetween">
				<view class="flexStart">
					<image :src="personal?.picUrl"></image>
					<text>{{personal?.realName}} {{personal?.sex=='0'?'(女)':'(男)'}}</text>
				</view>
				<text>{{personal?.birth}}</text>
			</view>
			<view class="nameList">
				<view v-if="coachesNamesStr">教练-{{coachesNamesStr}}</view>
				<view v-if="leadersNamesStr">领队-{{leadersNamesStr
				}}</view>
			</view>
		</view>
		
		<!--项目 -->
		<view class="contentBox">
			<view class="leftLine">报项列表</view>
			<view class="borderLine" style="padding:0">
				 <view v-for="item in treeData" :key="item.id">
				 	<uni-collapse class="projectlist">
				 		<uni-collapse-item titleBorder="none" :border="false" :open="true">
				 			<template v-slot:title>
				 				<view class="uni-list" style="background-color: transparent;">
				 					<checkbox-group @change="projectIdChange" :data-signId="item.signId">
				 						<view class="uni-list-cell uni-list-cell-pd">
				 							<checkbox color="#d43e3e" v-if="item.hasNext==0&&item.canSign=='1'" :value="item.type+'_'+item.levelId"
				 								:disabled="item.belongToThisTeam==0"
				 								:checked="item.checked" />
				 							<!-- <checkbox v-if="item.hasNext==1" :disabled="item.hasNext==1" :checked="item.checked" /> -->
				 							<text class="projectName">{{item.name}}</text>
				 						</view>
				 					</checkbox-group>
				 				</view>
				 			</template>
				 			<view class="content" v-if="item.hasNext==1">
				 
				 				<view class="uni-list" v-for="g in item.groupList" :key="item.id">
				 					<checkbox-group @change="groupIdChange" :data-signId="g.signId" v-if="g.hasNext==0">
				 						<view class="uni-list-cell uni-list-cell-pd" v-if="g.hasNext=='0'&& g.canSign=='1'">
				 							<view>
				 								<checkbox color="#d43e3e"
				 									:disabled="g.belongToThisTeam==0"
				 									:value="item.type+'_'+g.levelId" :checked="g.checked" />
				 							</view>
				 							<view class="groupName">{{g.name}}
				 							</view>
				 						</view>
				 						<view class="uni-list-cell uni-list-cell-pd" v-if="g.hasNext=='1'">
				 							<view class="groupName">
				 								{{g.name}}
				 							</view>
				 						</view>
				 					</checkbox-group>
				 
				 					<!-- 级别 -->
				 					<view v-for="l in g.levelList" :key="l.id" v-show="g.hasNext=='1'&&l.canSign==1">
				 						<checkbox-group @change="levelIdChange" :data-signId="l.signId">
				 							<view class="uni-list-cell uni-list-cell-pd">
				 								<view>
				 									<checkbox  :value="item.type+'_'+l.id" color="#d43e3e"
				 										:disabled="l.canSign==0||l.belongToThisTeam==0" :checked="l.checked" />
				 								</view>
				 								<view class="levelName">
				 									{{g.name}}{{l.name}}
				 									<text v-if="l.levelType==2">(女)</text>
				 									<text v-if="l.levelType==1">(男)</text>
				 								</view>
				 							</view>
				 						</checkbox-group>
				 					</view>
				 				</view>
				 			</view>
				 		</uni-collapse-item>
				 	</uni-collapse>
				 </view>
				 
			</view>
		
		</view>
	
		<view class="fixedBottom">
			<!-- <button class="btn btnKx" @click="goPrev" type="default">上一步</button> -->
			<button class="btn btn1" @click="goNext" type="default">返回</button>
		</view>

		<!-- 队友列表 -->
		<uni-popup ref="popTeammates" @maskClick="teammateMaskClick" type="bottom" @change="popupChange">
			<view class="popTitle">成员选择</view>
			<view v-if="sonLevelList.length>0" class="teammateBox teamSports">
			  <scroll-view  scroll-y="true" class="teamListArea mt-15">
				  <view v-for="(item,index) in sonLevelList" class="sportList" :key="index">
					  <view>
					  <text class="mr20">{{item.text}}</text>
					   <text class="color01" v-if="item.person"  @click="()=>changePerson(index)">{{item.person.realName+" ("+item.person.sexStr+")"}}</text>
					  <text  class="ml20 color02" v-show="item.person?.id==personal.id">必选</text>
					  </view>
					  <i  class="iconfont icon-agent" @click="()=>changePerson(index)"></i>
				  </view>
			  </scroll-view>
			  <button class="btn btn1"
			  	@click="chooseSportsMateDone">确定</button>
		    </view>
			<view v-else class="teammateBox">
				<view class="teamListArea mt-15">
					<checkbox-group @change="changeTeammates">
						<view class="tj">必选成员</view>
						<view class="flexLabel">
							<view>
								<checkbox disabled :value="personal.sex+'_'+personal.id" checked color="#e16964"/>
							</view>
							<image mode="aspectFill" class="headimg" :src="personal.picUrl"></image>
							<view class="mateinfo">{{personal.realName}}
								<text v-if="personal.sex=='0'">(女)</text>
								<text v-else>(男)</text>
							</view>
							<uni-data-select v-model="personal.sonlevel" v-if="sonLevelList.length>0"
								:localdata="sonLevelList" @change="changelevelson" label="选择级别"></uni-data-select>
						</view>
						<view class="tj">可选成员
							<text
								v-if="mateConfig.minCount!=mateConfig.maxCount">(请选择{{mateConfig.minCount}}~{{mateConfig.maxCount}}个队友)</text>
							<text v-else-if="mateConfig.minCount=='-1'&&mateConfig.maxCount=='-1'">(请至少选择1个队友)</text>
							<text v-else>(请选择{{mateConfig.minCount}}个队友)</text>
							<button
							style="float:right"
								v-if="mateConfig.minCount&&(teammateList.length < mateConfig.minCount)&&teammateList.length>0"
								type="primary" plain="true" @click="createSportman" size="mini">去创建</button>
							<view style="font-size: 24rpx;color: #999;">
								<text v-if="mateConfig.minMaleCount>0||mateConfig.maxMaleCount>0"
									style="margin-right: 20px;">男队:
									<text v-if="mateConfig.minMaleCount!=mateConfig.maxMaleCount&&mateConfig.minMaleCount>0">
										最少{{mateConfig.minMaleCount}}人 </text>
									<text v-if="mateConfig.minMaleCount!=mateConfig.maxMaleCount&&mateConfig.maxMaleCount>0">
										最多{{mateConfig.maxMaleCount}}人</text>
									<text
										v-if="mateConfig.minMaleCount==mateConfig.maxMaleCount&&mateConfig.maxMaleCount>0">{{mateConfig.maxMaleCount}}人</text>
								</text>
								<text v-if="mateConfig.minFemaleCount>0||mateConfig.maxFemaleCount>0">女队:
									<text
										v-if="mateConfig.minFemaleCount!=mateConfig.maxFemaleCount&&mateConfig.minFemaleCount>0">
										最少{{mateConfig.minFemaleCount}}人 </text>
									<text
										v-if="mateConfig.minFemaleCount!=mateConfig.maxFemaleCount&&mateConfig.maxFemaleCount>0">
										最多{{mateConfig.maxFemaleCount}}人</text>
									<text
										v-if="mateConfig.minFemaleCount==mateConfig.maxFemaleCount&&mateConfig.minFemaleCount>0">{{mateConfig.minFemaleCount}}人</text>
								</text>
							</view>
							
						</view>
						<view class="flexLabel" v-for="item in teammateList" :key="item.id">
							<view>
								<checkbox :disabled="item.cantchosemate" :value="item.sex+'_'+item.id" color="#e16964"
									:checked="item.checked" />
							</view>
							<image mode="aspectFill" class="headimg" :src="item.picUrl"></image>
							<view class="mateinfo">{{item.realName}}
								<text v-if="item.sex=='0'">（女）</text>
								<text v-else>（男）</text>
							</view>
							<uni-data-select v-model="item.sonlevel" v-if="sonLevelList.length>0"
								:localdata="sonLevelList" @change="changelevelson" label="选择级别"></uni-data-select>
						</view>
					</checkbox-group>
					<view class="nodata" v-if="teammateList.length==0">
						<image mode="aspectFit" src="/static/nodata.png"></image>
						<text>暂无可选队友</text>
						<button type="primary" plain="true" @click="createSportman" size="mini">去创建</button>
					</view>
				</view>

				<button class="btn btn1" v-if="teammateList.length>0||mateConfig.minCount==0"
					@click="chooseMateDone">确定</button>
			</view>
		</uni-popup>
	    <uni-popup ref="persons" type="bottom" >
			<view class="popTitle" v-if="changeIndex!==null&&sonLevelList.length>0">{{sonLevelList[changeIndex].name}}</view>
			<scroll-view  scroll-y="true" class="teamSports personBox">
				<view class="uni-list">
							<radio-group @change="radioChange" >
								<view class="tj">必选成员</view>
								<label class="uni-list-cell uni-list-cell-pd">
								   <view class="flexStart">
								    <image :src="personal.picUrl"></image>
								   <view>{{personal.realName+' ('+personal.sexStr+')'}}</view>
								   </view>
									<view>
										<radio color="#d43e3e" :value="personal.id"  :disabled="matesList.indexOf(personal.id) != -1"/>
									</view>
									
								</label>
								<view class="tj">可选成员</view>
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index ) in teammateList" :key="item.value">
								   <view class="flexStart">
								    <image :src="item.picUrl"></image>
								   <view>{{item.realName+' ('+item.sexStr+')'}}</view>
								   </view>
									<view>
										<radio color="#d43e3e" :value="item.id" :disabled="item.disabled1"/>
									</view>
									
								</label>
							</radio-group>
				</view>
				
			</scroll-view>

		</uni-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		watch
	} from 'vue';
	import * as match from '@/common/match.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import _ from 'lodash';
	const data = reactive({
		baseFormData: {},
		personal: {},
		treeData: [],
		teammateList: [],
		levelson: [],
		matchId: '',
		levelId: '',
		mateConfig: {},
		chooseList: [],
		sonLevelList: [],
		popTeammates: null,
		coachesNamesStr:null,
		leadersNamesStr:null,
		changeIndex:null,
		persons:null,
	});
	const {
		baseFormData,
		personal,
		treeData,
		teammateList,
		levelson,
		matchId,
		levelId,
		chooseList,
		sonLevelList,
		mateConfig,
		popTeammates,
		coachesNamesStr,
		leadersNamesStr,
		changeIndex,
		persons,
	} = toRefs(data);
	let personId = ''
	let signType = ''
	let groupId = ''
	let teamId = ''
	let cancelId
	let nowLevel = ''
	let mates = []
	let matesList=[]
	onLoad((option) => {
		console.log(option)
		matchId.value = option.matchId
		personId = option.personId
		signType = option.signType
		groupId = option.groupId
		teamId = option.teamId || '0'
		coachesNamesStr.value=option.coachesNamesStr,
		leadersNamesStr.value=option.leadersNamesStr
	})
	onShow(() => {
		// 获取个人信息
		getPersonal()
		getCanSignTree()
		if (nowLevel) {
			getTeammate()
		}
	})
	function radioChange(e){
		matesList=[]
		if(e.detail.value==personal.value.id){
			sonLevelList.value[changeIndex.value].person=personal.value
		}else{
			teammateList.value.forEach(item=>{
				if(item.id==e.detail.value){
					sonLevelList.value[changeIndex.value].person=item
				}
			})
		}
		sonLevelList.value.forEach(item=>{
			if(item.person){
				matesList.push(item.person.id)
			}
		})
		 persons.value.close()
	}
    function changePerson(index){
		console.log(matesList)
		changeIndex.value=index
		 persons.value.open()
		 for (const p of teammateList.value) {
		    p.disabled1 = false;
		    if (matesList.indexOf(p.id) != -1) {
		      p.disabled1 = true;
		    }
		  }
	}
	function getPersonal() {
		match.getPersonInfoById(personId).then(res => {
			personal.value = res.data
		})
	}
	watch(
		levelId, (val, oldVal) => {
			if (val.length > 0) {
				judgeChooseTeam(val)
			} else {
				// 取消 del
				removeThis(cancelId)
			}
		}
	)
	function findIsLevelChecked(level) {
		for (let p of treeData.value) {
			if (level == p.levelId) {
				p.checked = true
			}
			for (let g of p.groupList) {
				if (level == g.levelId) {
					g.checked = true
				}
				for (let l of g.levelList) {
					if (level == l.id) {
						l.checked = true
					}
				}
			}
		}
	}

	function findIsLevelFalse(nowLevel) {
		for (let p of treeData.value) {
			if (nowLevel == p.levelId) {
				p.checked = false
			}
			if (nowLevel == p.id) {
				p.checked = false
			}
			for (let g of p.groupList) {
				if (nowLevel == g.levelId) {
					g.checked = false
				}
				if (nowLevel == g.id) {
					g.checked = false
				}

				for (let l of g.levelList) {
					if (nowLevel == l.id) {
						l.checked = false
					}
				}
			}
		}
	}

	function getCanSignTree() {
		match.getMySignListTree(matchId.value, personId,teamId).then(res => {
			treeData.value = res.data
			// 循环项目，组，级别 赋值是否checked
			getMyIsSign()
		})
	}
	let signOk = []

	function getMyIsSign() {
		match.getMySignIds(matchId.value, personId, teamId).then(res => {
			// 循环项目，组，级别 赋值是否checked
			signOk = res.data
			for (let s of signOk) {
				for (let p of treeData.value) {
					if (s.eid == p.levelId) {
						p.checked = true
						p.signId = s.signId
						p.belongToThisTeam = s.belongToThisTeam
							p.canSign="1"
					}
					for (let g of p.groupList) {
						if (s.eid == g.levelId) {
							g.checked = true
							g.signId = s.signId
							g.belongToThisTeam = s.belongToThisTeam
							g.canSign="1"
						}
						for (let l of g.levelList) {
							if (s.eid == l.id) {
								l.checked = true
								l.signId = s.signId
								l.belongToThisTeam = s.belongToThisTeam
								l.canSign="1"
							}
						}
					}
				}
			}
		})
	}

	function projectIdChange(e) {
		levelId.value = e.detail.value
		if (e.detail.value.length < 1) {
			cancelId = e.target.dataset.signid
		}
	}

	function groupIdChange(e) {
		levelId.value = e.detail.value
		if (e.detail.value.length < 1) {
			cancelId = e.target.dataset.signid
		}
	}

	function levelIdChange(e) {
		levelId.value = e.detail.value
		if (e.detail.value.length < 1) {
			cancelId = e.target.dataset.signid
		}
	}

	function removeThis(id) {
		if (id) {
			match.deleteSign(id).then(res => {
				// 重新获取已报名信息
			}).catch(err => {
				// 
			})
		}
	}

	function getTeammate() {
		let obj = {
			levelId: nowLevel,
			groupId: groupId,
			personId: personId
		}
		match.getCanSignLevelPerson(obj).then(res => {
			// 队友列表
			mateConfig.value = res.data
			teammateList.value = res.data.personList
			for (let p of teammateList.value) {
				p.cantchosemate = false
				if (mateConfig.value.maxMaleCount == 0 && p.sex == '1') {
					p.cantchosemate = true
				}
				if (mateConfig.value.maxFemaleCount == 0 && p.sex == '0') {
					p.cantchosemate = true
				}
			}
			popTeammates.value.open()
			matesList=[]
		}).catch(err => {
			// 取消这个勾
			findIsLevelFalse(nowLevel)
		})
	}

	function getSonLevels() {
		sonLevelList.value = []
		match.querySonLevel(nowLevel).then(res => {
			sonLevelList.value = res.data
			for (let ll of sonLevelList.value) {
				ll.value = ll.id
				ll.text = ll.name
				ll.person=null
			}
		})
	}

	function judgeChooseTeam(val) {
		// 判断项目类型-是否选队友
		let tmArr = ['1', '2', '3', '4', '6']
		let type = val[0].split('_')[0]
		nowLevel = val[0].split('_')[1]
		if (tmArr.indexOf(type) > -1) {
			getTeammate()
			getSonLevels()
		} else {
			// 半提交
			let obj = {
				levelId: nowLevel,
				athleteIds: personId,
				groupId: groupId,
				teamId: teamId,
				sonLevelIds: ''
			}
			saveOne(obj)
		}
	}

	function teammateMaskClick() {
		console.log('nowLevel', nowLevel)
		popTeammates.value.close()
		mates = []
		teammateList.value = []
		// 取消勾
		findIsLevelFalse(nowLevel)
	}
function popup(e){
	if(e.show==false){
		mates = []
		teammateList.value = []
		nowLevel = ''
		sonLevelIds = []
		sonLevelList.value=[]
		this.$forceUpdate()
	}
	
}
	function saveOne(obj) {
		match.sportsmanDone(obj).then(res => {
			if (res.msg.indexOf("Exception:") > -1) {
				let msg = res.msg.slice(10)
				
				uni.showModal({
					title: '提示',
					content: msg,
					success: function(res) {}
				});
				popTeammates.value.close()
				mates = []
				teammateList.value = []
				nowLevel = ''
				sonLevelIds = []
				sonLevelList.value=[]
				findIsLevelFalse(nowLevel)
				return
			}
			var backInfo = res.data
			popTeammates.value.close()
			mates = []
			teammateList.value = []
			nowLevel = ''
			sonLevelIds = []
			sonLevelList.value=[]
			getMyIsSign()
		}).catch(err => {
			findIsLevelFalse(nowLevel)	
		})
	}

	function goPrev() {
		uni.navigateBack()
	}

	function goNext() {
		uni.navigateBack()
	}

	let manNum = 0
	let femaleNum = 0
	let sonLevelIds = []
	function changeTeammates(e) {
		mates = []
		manNum = 0
		femaleNum = 0
		for (const m of e.detail.value) {
			let arr = m.split('_')
			mates.push(arr[1])
			if (personal.value.id == arr[1]) {
				continue
			}
			if (arr[0] == '1') {
				manNum++
			} else {
				femaleNum++
			}
		}
		for (let p of teammateList.value) {
			if (manNum == mateConfig.value.maxMaleCount && p.sex == '1' && mates.indexOf(p.id) == -1) {
				p.cantchosemate = true
			} else if (femaleNum == mateConfig.value.maxFemaleCount && p.sex == '0' && mates.indexOf(p.id) == -1) {
				p.cantchosemate = true
			} else if (mates.indexOf(p.id) == -1 && mateConfig.value.maxCount != -1 && mates.length == (mateConfig.value
					.maxCount + 1)) {
				p.cantchosemate = true
			} else {
				p.cantchosemate = false
			}
		}

	}
    function chooseSportsMateDone(){
		  if (matesList.length < mateConfig.value.minCount+1 && mateConfig.value.minCount > 0) {
			uni.showToast({
				title: `至少选择${mateConfig.value.minCount+1}个成员`,
				icon: 'none',
				duration: 2000
			});
			return
		  }
		 if(matesList.indexOf(personal.value.id) == -1){
		 uni.showToast({
		 	title: '必选成员未选择',
		 	icon: 'none',
		 	duration: 2000
		 });
		 return
		 }
		  const athleteIds = [];
		  sonLevelList.value.forEach(item=>{
		    sonLevelIds.push(item.id)
		    athleteIds.push(item.person.id)
		  })
		  const obj = {
		    levelId: nowLevel,
		    athleteIds: athleteIds.toString(),
		    sonLevelIds: sonLevelIds.toString() || "",
		    groupId: groupId,
		    teamId:teamId || '',
		  };
		  // 半提交
		  saveOne(obj);
	}
	function chooseMateDone() {
		if (mateConfig.value.minMaleCount != '-1' && manNum < mateConfig.value.minMaleCount) {
			uni.showToast({
				title: `请至少选择${mateConfig.value.minMaleCount}个男队友`,
				icon: 'none',
				duration: 2000
			});
			return
		}
		if (mateConfig.value.maxMaleCount != '-1' && manNum > mateConfig.value.maxMaleCount) {
			uni.showToast({
				title: `最多选择${mateConfig.value.maxMaleCount}个男队友`,
				icon: 'none',
				duration: 2000
			});
			return
		}
		if (mateConfig.value.minFemaleCount != '-1' && femaleNum < mateConfig.value.minFemaleCount) {
			uni.showToast({
				title: `请至少选择${mateConfig.value.minFemaleCount}个女队友`,
				icon: 'none',
				duration: 2000
			});
			return
		}
		if (mateConfig.value.maxFemaleCount != '-1' && femaleNum > mateConfig.value.maxFemaleCount) {
			uni.showToast({
				title: `最多选择${mateConfig.value.maxFemaleCount}个女队友`,
				icon: 'none',
				duration: 2000
			});
			return
		}
		if ((mates.length - 1 < mateConfig.value.minCount) && mateConfig.value.minCount > 0) {
			uni.showToast({
				title: `请至少选择${mateConfig.value.minCount}个队友`,
				icon: 'none',
				duration: 2000
			});
			return
		}
		sonLevelIds = []
		let athleteIds = []
		for (let p of teammateList.value) {
			console.log(teammateList.value)
			if (mates.indexOf(p.id) != -1) {
				if (sonLevelList.value.length > 0 && !p.sonlevel) {
					uni.showToast({
						title: `请分配级别`,
						icon: 'none',
						duration: 2000
					});
					return
				}
				sonLevelIds.push(p.sonlevel)
				athleteIds.push(p.id)
			}
		}
		if (sonLevelList.value.length > 0 && !personal.value.sonlevel) {
			uni.showToast({
				title: `请分配级别`,
				icon: 'none',
				duration: 2000
			});
			return
		}
		sonLevelIds.push(personal.value.sonlevel)
		athleteIds.push(personal.value.id)
		if(sonLevelList.value.length == 0){
			sonLevelIds = []
		}
		let obj = {
			levelId: nowLevel,
			athleteIds: athleteIds.toString(),
			groupId: groupId,
			teamId: teamId || '',
			sonLevelIds: sonLevelIds.toString() || ''
		}
		// 半提交
		saveOne(obj)
	}
	let sonLevelidArr = []

	function changelevelson(e) {
		console.log(e)
		console.log(teammateList.value)

	}

	function createSportman() {
		let path = `/pages_match/match/add_coach?groupId=${groupId}&id=0&signType=${signType}`;
		uni.navigateTo({
			url: path
		});
	}
</script>

<style scoped lang="scss">
	.uni-list-cell-pd{
			padding: 22rpx 30rpx 0 30rpx;
	}
    :deep(.uni-collapse-item__title){
		padding-bottom:22rpx;
	}
	.tj {
		padding: 20rpx 30rpx;/*  */
		background:#feebdf;
	}

	.addBtn {
		width: 700rpx;
		height: 90rpx;
		background: #ffffff;
		border: 1rpx solid #d43e3e;
		color: #d43e3e;
		font-size: 30rpx;
		border-radius: 15rpx;
	}

	.teammateBox {
		background: #fff;
		height: 90vh;
		overflow: auto;
		position: relative;

		.btn1 {
			position: absolute;
			bottom: 30px;
			margin: auto;
			left: 0;
			right: 0;
		}
	}

	.projectlist {
		:deep(.uni-collapse) {
			border-radius: 30rpx;
			margin: 0 0 40rpx;
		}

		.uni-list-cell {
			justify-content: start;

			checkbox {
				margin-right: 30rpx;
			}
		}
	}

	:deep(.uni-collapse-item) {
		padding: 0;
		margin: 0;
	}

	.projectName {
		font-size: 30rpx;
		color: #4C5359;
	}

	.groupName {
		font-size: 30rpx;
		color: #000000;
	}

	.levelName {
		font-size: 30rpx;
	}

	.teammateBox {
		background: #fff;
		height: 70vh;
		overflow: auto;
		position: relative;

		.btn1 {
			position: absolute;
			bottom: 30px;
			margin: auto;
			left: 0;
			right: 0;
		}
	}
   .teamSports{
	   background:#fff;
   	height: 50vh;
	.teamListArea{
		height:calc( 100% - 150rpx);
		padding:30rpx;
		box-sizing: border-box;
	}
	.sportList{
		background:#f6f6f6;
		display:flex;
		justify-content: space-between;
		align-items: center;
		font-size:18px;
		height:100rpx;
		margin-bottom:20rpx;
		padding:0 20rpx;
		.iconfont{
			font-size:25px;
			color:indianred;
		}
	}
   }
   .personBox{
	   image{
		   width: 80rpx;
		   height: 80rpx;
		   border-radius: 50%;
		   margin-right:20rpx;
	   }
	  .uni-list-cell-pd{
	  		padding: 22rpx 30rpx;
	  }
   }
	.headimg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 40rpx;
	}

	.flexLabel {
		align-items: center;
		padding: 22rpx 30rpx;
		display: flex;
		justify-content: flex-start;

		:deep(.uni-stat__select) {
			width: 20vw;
		}
	}

	.mateinfo {
		font-size: 30rpx;
		width: 8em;

		text {
			color: #4C5359;
		}
	}

	.teamListArea {
		height: 76%;
		overflow: auto;
	}
	.topBox{
		width:100%;
		margin:30rpx 0;
		box-sizing: border-box;
		background: #ffffff;
		padding:30rpx 20rpx;
		box-shadow: 5rpx 5rpx 5rpx #bebebe;
		.top{
			box-sizing: border-box;
			padding:0 30rpx 20rpx 30rpx;
			image{
				width:80rpx;
				height:80rpx;
				border-radius: 50%;
				margin-right:30px;
			}
			border-bottom:1px solid #ddd;
		}
		.nameList{
			margin-top:20rpx;
			display: flex;
			view{
				background: #d43e3e;
				color:#fff;
				padding:15rpx 30rpx;
				border-radius: 10rpx;
				margin-right:20rpx;
			}
		}
	}

	.contentBox{
		width:100%;
		margin:30rpx 0;
		box-sizing: border-box
		;
		background: #ffffff;
		padding:30rpx 20rpx;
		box-shadow: 5rpx 5rpx 5rpx #bebebe;
	:deep(.uni-collapse-item__title){
		background:#ffebeb;
	}
	}
	.popTitle{
		background:linear-gradient(90deg, #e17676, #d43e3e);
		color:#fff;
		width:100%;
		height:100rpx;
		line-height: 100rpx;
	    text-align: center;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}
</style>